<template>
  <div class="box">
    <el-empty class="nothing" v-if="cardList.length===0" description="没有可复习的卡片"></el-empty>
    <div v-if="visible===true" class="card">
    <div class="title">当前第{{index+1}}张</div>
    <div class="date">{{ cardList[index].card_date }}</div>
    <div class="question">{{ cardList[index].card_question }}</div>
    <div class="question2">相关：{{ cardList[index].card_text }}</div>
    <div>
      <div v-show="isShow==false" class="answer1" @click="isShow=true">点击查看答案</div>
      <div v-show="isShow==true" class="answer">{{ cardList[index].card_answer }}</div>
    </div>
      <el-button-group>
          <el-button type="primary" @click="pre" v-if="preShow==true">&lArr;&nbsp;上一张</el-button>
          <el-button type="primary" @click="back">结束</el-button>
          <el-button type="primary" @click="next" v-if="nextShow==true">下一张&nbsp;&rArr;</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import router from '@/router'
export default defineComponent({
  name: 'ReviewView',
  setup () {
    const visible = ref(true)
    const nextShow = ref(true)
    const preShow = ref(false)
    const isShow = ref(false)
    const cardList: any = ref(null)
    const userId = sessionStorage.getItem('userId')
    const index = ref(0)
    const getCard = () => {
      visible.value = true
      axios.post('http://localhost:8081/reviewCard', { user_id: userId }).then(res => {
        if (res.data != null) {
          cardList.value = res.data
        } else {
          ElMessage.error('服务器繁忙')
        }
      }).catch(error => {
        console.log(error)
      })
    }
    const pre = () => {
      if (index.value !== 0 && index.value > 0) {
        index.value = index.value - 1
        nextShow.value = true
        if (index.value === 0) {
          preShow.value = false
        }
      } else {
        preShow.value = false
      }
    }
    const next = () => {
      if (index.value !== cardList.value.length - 1 && index.value < cardList.value.length - 1) {
        isShow.value = false
        index.value = index.value + 1
        preShow.value = true
        if (index.value === cardList.value.length - 1) {
          nextShow.value = false
        }
      } else { nextShow.value = false }
    }
    const back = () => {
      router.push('/individual')
    }
    getCard()
    return {
      visible,
      cardList,
      index,
      pre,
      next,
      nextShow,
      preShow,
      isShow,
      back
    }
  }
})
</script>
<style scoped>
.card{
  width: 30%;
  height: auto;
  position: absolute;
  margin-left: 33%;
  margin-right: 30%;
  margin-top: 100px;
  box-shadow: 0px 0px 5px #bebfc0;
  padding: 30px;
}
.date{
  text-align: right;
  margin-right: 23px;
}
.question{
  text-align: left;
  margin-top: 20px;
}
.question2{
  text-align: left;
  margin-top: 20px;
  color: grey;
}
.answer{
  text-align: left;
  margin-top: 20px;
  margin-bottom: 20px;
}
.answer1{
  cursor: pointer;
  text-align: center;
  color: gray;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
